<template>
	<!-- 分类页面 -->
	<view class="category">
		<!-- 热词搜索 -->
		<searchLink></searchLink>
		<!-- 内容区域 -->
		<view class="content-list">
			<!-- 左侧 -->
			<view class="left">
				<view class="item" :class="{active:index===activeIndex}" v-for="(item,index) in categoriesList" :key='index' @click="categoriesSelect(index)">{{item.cat_name}}</view>
			</view>
			<!-- 右侧 -->
			<view class="right">
				<image src="@/static/images/titleImage.png" mode=""></image>

				<view class="categories-list" v-for="(item2,index2) in categoriesList2" :key="index2">
					<!-- 二级分类 -->
					<view class="name-title">/<text class="name">{{item2.cat_name}}</text>/</view>
					<!-- 三级分类 -->
					<view class="categories" v-for="(item3,index3) in item2.children" :key="index3">
						<image :src="item3.cat_icon" mode=""></image>
						<view>{{item3.cat_name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchLink from '@/components/searchLink.vue' // 导入搜索组件
	import {
		aipCategories
	} from '@/aip/aip.js' // 导入分类页面请求

	export default {
		// 注册组件
		components: {
			searchLink
		},
		data() {
			return {
				activeIndex: 0, // 下标
				categoriesList: [], // 一级类别列表
				categoriesList2: [], // 二级类别列表
			}
		},
		// 打开页面加载
		onLoad() {
			this.aipCategories()
		},
		methods: {
			// 一级分类点击事件
			categoriesSelect(index) {
				this.activeIndex = index // 把当前点击下标赋值给自定义下标 实现排他添加类名样式
				this.categoriesList2 = this.categoriesList[index].children // 保存二级类别列表数据
				console.log(this.categoriesList[index].children)
			},
			// 分类请求方法
			async aipCategories() {
				const res = await aipCategories() // 调用分类请求方法
				this.categoriesList = res // 保存一级类别列表数据
				// console.log(res)
			}
		}

	}
</script>

<style lang="less" scoped>
	.content-list {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 100rpx;

		.left {
			width: 198rpx;
			overflow: auto;

			.item {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background-color: #f4f4f4;
				border: 1px solid #eeeeee;

				&.active {
					position: relative;
					color: #eb4450;

					&::before {
						position: absolute;
						top: 20rpx;
						left: 0;
						content: '';
						width: 8rpx;
						height: 60rpx;
						background-color: #eb4450;
					}
				}
			}
		}

		.right {
			flex: 1;
			padding: 0 16rpx;
			overflow: auto;

			>image {
				margin: 20rpx 0;
				width: 100%;
				height: 180rpx;
			}

			.name-title {
				width: 100%;
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				color: #e0e0e0;

				.name {
					margin: 0 30rpx;
					color: #000;
				}
			}

			.categories-list {
				display: flex;
				flex-wrap: wrap;

				.categories {
					text-align: center;
					width: 33.33%;

					>image {
						width: 120rpx;
						height: 120rpx;
					}
				}
			}

		}
	}
</style>
